import React from 'react';
import Taro from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import i18n from 'i18n-js';
import { observer } from "mobx-react";
import { Wallet_Store_Key } from "@/models/wallet";
import { norInject, INorInjectProps } from "@/models";
import PageContainer from "@/components/PageContainer";
import { GButton } from '@/components/GButton';
import selIcon from '@/assets/images/my_recharg_icon_sel.png';
import gizCoinIcon from '@/assets/images/my_recharg_icon_gizwits_beans.png';
import Toast from '@/utils/Toast';
import {
  GStyleSheet,
  DynamicColors,
  GDynamicValue,
} from '@/utils/DarkMode';


const selColor = DynamicColors.cardBackgroundColor;
const unselColor = new GDynamicValue('#eee', '#222');

const dstyles = GStyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    flexDirection: 'column',
    backgroundColor: DynamicColors.normalBackgroundColor,
  },
  chargeCard: {
    padding: 15,
  },
  chargeTitle: {
    fontSize: 16,
    color: DynamicColors.normalTextColor,
  },
  chargeTips: {
    fontSize: 12,
    color: DynamicColors.subTitleTextColor,
  },
  chargeBtn: {
    marginTop: 30,
  },
  moneyBox: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginTop: 10
  },
  moneyItem: {
    width: '30%',
    height: 60,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 5,
    marginBottom: 15,
    borderWidth: 2,
    position: 'relative',
  },
  selIcon: {
    height: 20,
    width: 20,
    position: 'absolute',
    bottom: -1,
    right: -1,
    tintColor: DynamicColors.tintColor,
  },
  gizCoinBox: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  }
});

interface IProps extends INorInjectProps {

}

@norInject(Wallet_Store_Key)
@observer
export default class Charge extends React.Component<IProps> {

  constructor(props) {
    super(props);
    this.state = {
      id: 0,
      payType: 'WX_MINI',
    }
    this.loading = false;
  }

  async componentWillMount() {
    this.loadMode();
  }

  componentWillUnmount() {
    Toast.hideLoading();
  }

  loadMode = async () => {
    const { wallet } = this.props;
    const showLoading = !(wallet!.walletMode && wallet!.walletMode.length > 0);
    if (showLoading) {
      Toast.loading(i18n.t('LOADING'));
      const res = await wallet!.getWalletMode();
      Toast.hideLoading();
      if (res && res.length > 0) {
        this.setState({
          id: res[0].id,
        });
      }
    } else {
      this.setState({
        id: wallet!.walletMode[0].id,
      });
      wallet!.getWalletMode();
    }
  }

  onMoneySelect = (id) => {
    const data = {
      id,
    };
    this.setState(data);
  }

  renderMoney = () => {
    const styles = dstyles.style;
    const { wallet: { walletMode = [] } } = this.props;
    const { id } = this.state;
    const moneyItems = walletMode.map((item) => {
      const moneyText = `¥${item.money}`;
      const selected = id === item.id;
      return (
        <View
          key={item.id}
          style={{
            ...styles.moneyItem,
            backgroundColor: selected ? selColor.value : unselColor.value,
            borderColor: selected ? DynamicColors.tintColor.value : 'rgba(0,0,0,0)',
            borderStyle: 'solid',
            borderWidth: 2,
          }}
          onClick={() => { this.onMoneySelect(item.id); }}
        >
          <View style={styles.gizCoinBox}>
            <Image src={gizCoinIcon} style={{ width: 20, height: 20, marginRight: 5 }} />
            <Text style={{ color: DynamicColors.titleTextColor.value }}>{item.gizwitsCoin}</Text>
          </View>
          <Text style={{ textAlign: 'center', color: DynamicColors.subTitleTextColor.value, fontSize: 12 }}>{moneyText}</Text>
          {selected && <Image src={selIcon} style={styles.selIcon} />}
        </View>
      );
    });
    return (
      <View style={styles.moneyBox}>
        {moneyItems}
      </View>
    );
  }

  onConfirm = async () => {
    this.loading = true;
    Toast.showLoading({ content: i18n.t('BUYING') });
    const { wallet } = this.props;
    const { payType, id } = this.state;
    const params = {
      payType,
      remark: 'string',
      rechargeId: id,
      walletType: 'COIN'
    };
    const payRes = await wallet!.createAndPay(params);
    Toast.hideLoading();
    this.loading = false;
    let isSuccess = false;
    if (payRes && payRes.isSuccess) {
      isSuccess = true;
    }
    if (isSuccess) {
      wallet.getBalance();
      Taro.navigateBack({ delta: 1 });
    } else {
      setTimeout(() => {
        Toast.info(i18n.t('PAY_FAILED_PLEASE_RETRY'));
      }, 200);
    }
  }

  goChargeAgreement = () => {
    Taro.navigateTo({ url: "/pages/wallet/ChargeAgreement" });
  }

  render() {
    const styles = dstyles.style;
    const { payType } = this.state;
    return (
      <PageContainer title={i18n.t('CHARGE')}>
        <View style={styles.chargeCard}>
          <Text style={styles.chargeTitle}>{i18n.t('CHARGE_MONEY')}</Text>
          {this.renderMoney()}
          <Text style={styles.chargeTips}>
            *
            {i18n.t('CHARGE_TIPS')}
          </Text>
        </View>

        <GButton
          disabled={!payType}
          style={styles.chargeBtn}
          text={i18n.t('GO_CHARGE')}
          onPress={this.onConfirm}
        />
        <View style={{ textAlign: 'center', marginTop: 20 }}>
          <Text style={{ ...styles.chargeTips, textAlign: 'center', marginTop: 10 }}>
            {i18n.t('CHARGE_AGREEMENT_TIPS')}
          </Text>
          <Text onClick={this.goChargeAgreement} style={{ ...styles.chargeTips, color: 'rgb(89, 130, 198)' }}>{i18n.t('CHARGE_AGREEMENT')}</Text>
        </View>
      </PageContainer>
    );
  }
}
